<template>
    <el-drawer 
        :title="`${data.title} (答题记录)`"
        :visible.sync="visible" 
        direction="rtl"
        size="100%"
        :before-close="handleClose"
        class="record-drawer"
        ref="recordDrawer">
        <div class="search-content">
            <el-form :model="searchContent" ref="searchFrom" :inline="true">
                <el-form-item prop="store_id" label="选择店铺：">
                    <el-select size="mini" v-model="searchContent.store_id" filterable clearable>
                        <el-option 
                            v-for="item of storeList" 
                            :key="item.store_id" 
                            :value="item.store_id" 
                            :label="item.store_name">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                    <el-button type="primary" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="search-list">
            <el-table border :data="dataList">
                <el-table-column 
                    type="index" label="序号" width="80" align="center" :index="elTableIndex">
                </el-table-column>
                <el-table-column 
                    label="用户账号" min-width="120" align="center" prop="member_name">
                </el-table-column>
                <el-table-column 
                    label="手机号" min-width="120" align="center" prop="member_mobile">
                </el-table-column>
                <el-table-column 
                    label="来源店铺" min-width="180" align="center" prop="store_name" show-overflow-tooltip>
                </el-table-column>
                <el-table-column 
                    label="答题时间" min-width="160" align="center" prop="create_time">
                </el-table-column>
                <el-table-column label="操作" min-width="160" align="center">
                    <template #default="{ row }">
                        <el-button type="text" @click="handleDetail(row.record_id)">
                            查看答卷
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group">
                <el-button type="primary" @click="handleExport">导出</el-button>
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
    </el-drawer>
</template>
<script>
import { actionType } from './action_types.js'
export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        data: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            searchContent: {
                store_id: '',
                is_search: false
            },
            storeList: [],
            dataList: [],
            answerList: [],
            actionTypeJson: actionType(true),  // 问卷类型 - 对象形式
            pageArr: {
                page: 1,
                pageSize: +localStorage.getItem('pageSize') || 20,
                total: 0
            }
        }
    },
    watch: {
        visible: {
            immediate: true,
            handler(val) {
                if (val) {
                    // $nextTick() 里执行请求，解决loading动画被el-drawer遮挡偶现的问题
                    this.$nextTick(() => {
                        this.getData()
                        this.getStoreList()
                    })
                }
            }
        }
    },
    methods: {
        elTableIndex(index) {
            const { pageSize, page } = this.pageArr
            return index + 1 + (page - 1) * pageSize
        },
        handleClose() {
            this.handleReset()
            this.dataList = []
            this.pageArr.total = 0
            this.$emit("update:visible", false)
        },
        getStoreList() {
            const { questionnaire_id } = this.data
            let params = {
                pageSize: 10000,
                page: 1,
                questionnaire_id
            }
            this.$http.get('/admin/yt_car/index.php?act=questionnaire&op=questionnaireApplyList', { params })
            .then(res => {
                if (res.code == 1) {
                    this.storeList = res.data?.list || []
                } else {
                    throw res.msg
                }
            }).catch(error => {
                error && this.$message.error(`${error}`)
            })
        },
        getData() {
            const { questionnaire_id } = this.data
            let params = {
                pageSize: this.pageArr.pageSize,
                page: this.pageArr.page,
                questionnaire_id
            }
            if (this.searchContent.is_search) {
                params = { ...params, ...this.searchContent }
            }
            this.$http.get("/admin/yt_car/index.php?act=questionnaire&op=answerRecordList", { params }).
            then(res => {
                if (res.code == 1) {
                    this.dataList = res.data?.list || []
                    this.pageArr.total = +res.data.totalCount
                } else {
                    throw res.msg
                }
                this.pageArr.total = this.dataList.length
            }).catch(error => {
                error && this.$message.error(`${error}`)
            })
        },
        async handleDetail(record_id) {
            try {
                const params = { record_id }
                const res = await this.$http.get("/admin/yt_car/index.php?act=questionnaire&op=answerRecordDetail", { params })
                if (res.code != 1) {
                    throw res.msg
                }
                await this.$msgbox({
                    title: `答卷详情`,
                    message: (
                        <div class="answer-wrapper">
                            {
                                res.data.map((row, index) => {
                                    return (
                                        <div class="answer-item">
                                            <div class="answer-item__header">
                                                <strong>第{ row.sort }题：</strong>{ row.title } 
                                                {
                                                    row.type == 2 ? 
                                                        <span class="item-type">
                                                            [{ this.actionTypeJson[row.type]?.name }]
                                                        </span> : 
                                                        ''
                                                }
                                            </div>
                                            <div class="answer-item__content">
                                                回答：{ row.answer }
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    ),
                    customClass: 'answer-details',
                    showConfirmButton: false
                })
            } catch (error) {
                error && error != "cancel" && this.$message.error(`${error}`)
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize)
            this.pageArr.pageSize = pageSize
            this.pageArr.page = 1
            this.getData()
        },
        handleCurrentChange(page) {
			this.pageArr.page = page
			this.getData()
        },
        handleSearch() {
            this.searchContent.is_search = true
            this.pageArr.page = 1
            this.getData()
        },
        handleReset(refresh = null) {
            this.$refs.searchFrom?.resetFields()
            if (!this.searchContent.is_search) return
            this.searchContent.is_search = false
            this.pageArr.page = 1
            refresh && this.getData()
        },
		handleExport() {
			const origin = this.$store.state.location.origin
            const datas = { questionnaire_id: this.data.questionnaire_id, ...this.searchContent }
            const params = []
            Object.entries(datas).forEach(item => {
                if (item[1] || item[1] === 0) {
                    params.push(`${item[0]}=${item[1]}`)
                }
            })
			window.location.href = origin + "/admin/yt_car/index.php?act=questionnaire&op=answerRecordDetailExport&"+ params.join("&")
		}
    }
}
</script>
<style lang="scss" scoped>
.record-drawer /deep/ {
    position: absolute;
    height: 100%;
    .el-drawer.rtl {
        overflow: hidden;
        top: 0;
    }
    ::-webkit-scrollbar { 
        width: 9px;
        height: 9px;
    }
    ::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: rgba(144, 147, 153, 0.3);
        border-radius: 9px;
    }
    .el-drawer {
        width: 100%;
        max-width: 1280px;
    }
    .el-drawer__header {
        z-index: 10;
        margin-bottom: 25px;
    }
    .el-drawer__body {
        padding: 0 24px 12px;
        display: flex;
        flex-grow: 1;
        height: 0;
        flex-direction: column;
        box-sizing: border-box;
        .search-list {
            flex-grow: 1;
            height: 0;
            .el-table {
                height: 100%!important;
            }
        }
        .search-content {
            padding: 0;
            margin-bottom: 6px;
            .el-form-item {
                margin: 0px 0 10px 0;
                + .el-form-item .el-form-item__label {
                    margin-left: 16px;
                }
                .el-button {
                    margin-left: 12px;
                    + .el-button {
                        margin-left: 8px;
                    }
                }
            }
        }
        .search-list {
            width: 100%;
            .el-table {
                height: 100%;
                .el-table__body-wrapper, .el-table__fixed-body-wrapper {
                    height: calc(100% - 36px)!important;
                    overflow-y: auto;
                }
            }
        }
    }
}
</style>
<style lang="scss">
.answer-details {
    width: 600px;
    max-height: 88%;
    // height: 100%;
    overflow: hidden;
    ::-webkit-scrollbar { 
        width: 9px;
        height: 9px;
    }
    ::-webkit-scrollbar-thumb {
        cursor: pointer;
        background-color: rgba(144, 147, 153, 0.3);
        border-radius: 9px;
    }
    .el-message-box__content {
        overflow: hidden auto;
        // max-height: calc(100% - 43px);
        max-height: calc(87vh - 43px);
        box-sizing: border-box;
    }
    .answer-item {
        padding: 9px 0;
        border-bottom: 1px solid #DCDFE6;
        .answer-item__header {
            margin-bottom: 2px;
            color: #222;
            .item-type {
                margin-left: 8px;
                color: #888;
            }
        }
        .answer-item__content {
            color: #777
        }
    }
}
</style>